<template>
  <div class="sopes" :id="data.id" :style="data.style" draggable="true" @dragstart="dragstart" @dragend="dragend" @touchend="touchend">line</div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue-demi"

const emit = defineEmits(['addsopes'])

const touchend = function(){
  emit('addsopes')
}

const props = defineProps({
  data: {
    type: Object,
    default: {
      id: 0,
      style: '',
      name: ''
    }
  }
})

const dragstart = function(event) {
  event.dataTransfer.setData('node_id', props.data.id)
  event.dataTransfer.setData('node_touch_x', event.offsetX)
  event.dataTransfer.setData('node_touch_y', event.offsetY)
}
const dragend = function(event) {
  event.dataTransfer.clearData()
}
</script>
<style scoped lang="scss">
.sopes {
  line-height: 30px;
  font-size: 18px;
  padding: 0 20px;
  margin: 10px;
  background-color: #eee;
  border-radius: 5px;
  border: 1px solid #888;
}
</style>